<!-- 心理测评表 -->
<template>
  <div class="heartMark">
    <!-- 模糊查询 -->
    <el-input
      placeholder="请输入内容"
      v-model="blurredName"
      style="width: 300px; margin-left: 50px"
    ></el-input>
    <el-button type="primary" @click="selectBlurred" style="margin-right: 20px"
      >查询</el-button
    >
    <!-- 添加按钮--------------------------------------------------------------------OK -->
    <el-button
      type="primary"
      @click="dialogFormVisible = true"
      style="margin-right: 400px; float: right"
      >新增</el-button
    >
    <el-dialog title="新增预约信息" :visible.sync="dialogFormVisible">
      <el-form :model="add">
        <el-form-item label="预约类型" :label-width="formLabelWidth">
          <el-select v-model="add.type" placeholder="请选择">
            <el-option label="在线咨询" value="在线咨询"></el-option>
            <el-option label="面对面咨询" value="面对面咨询"></el-option>
            <el-option label="电话咨询" value="电话咨询"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="咨询时间" :label-width="formLabelWidth">
          <el-input v-model="add.createtime" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input v-model="add.content" autocomplete="off"></el-input>
        </el-form-item>
        <!-- -----------------------------------------------OK -->
        <el-form-item label="咨询师" :label-width="formLabelWidth">
          <el-select v-model="add.teacherId" placeholder="请选择">
            <el-option
              v-for="item in this.TeacherIdAndName"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约用户" :label-width="formLabelWidth">
          <el-select v-model="add.userId" placeholder="请选择">
            <el-option
              v-for="item in this.UserIdAndName"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约状态" :label-width="formLabelWidth">
          <el-select v-model="add.status" placeholder="请选择">
            <el-option label="未确认" value="0"></el-option>
            <el-option label="未评价" value="1"></el-option>
            <el-option label="已评价" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearAdd">取 消</el-button>
        <el-button type="primary" @click="insertReservation">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 表格显示区域 -----------------------------------------------OK-->
    <el-table stripe :data="reservations" style="width: 100%">
      <el-table-column prop="id" label="id" width="80" align="center">
      </el-table-column>
      <el-table-column prop="type" label="咨询类型" width="120" align="center">
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="咨询时间"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="content" label="咨询内容" align="center">
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="咨询师名称"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名称"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="预约状态"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">未确认</span>
          <span v-else-if="scope.row.status == 1">未评价</span>
          <span v-else-if="scope.row.status == 2">已评价</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleDelete(scope.row)"
            type="danger"
            icon="el-icon-delete"
            size="small"
            >删除</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑 -------------------------------------------------------OK-->
    <el-dialog title="编辑预约信息" :visible.sync="isEdit">
      <el-form :model="edit">
        <el-form-item label="预约类型" :label-width="formLabelWidth">
          <el-select v-model="edit.type" placeholder="请选择">
            <el-option label="在线咨询" value="在线咨询"></el-option>
            <el-option label="面对面咨询" value="面对面咨询"></el-option>
            <el-option label="电话咨询" value="电话咨询"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input v-model="edit.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="咨询师"
          prop="teacherName"
          :label-width="formLabelWidth"
        >
          <el-select v-model="edit.teacherName" placeholder="请选择">
            <el-option
              v-for="item in this.TeacherIdAndName"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="预约用户"
          prop="userName"
          :label-width="formLabelWidth"
        >
          <el-select v-model="edit.userName" placeholder="请选择">
            <el-option
              v-for="item in this.UserIdAndName"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约状态" :label-width="formLabelWidth">
          <el-select v-model="edit.status" placeholder="请选择">
            <el-option label="未确认" value="0"></el-option>
            <el-option label="未评价" value="1"></el-option>
            <el-option label="已评价" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false">取 消</el-button>
        <el-button type="primary" @click="updateReservation">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 30, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "HeartMarkComponent",
  data() {
    //这里存放数据
    return {
      page: 1, //当前页码
      size: 10, //每页显示条数
      reservations: [], //表格数据
      totalCount: 0, //总条数

      dialogFormVisible: false, //表单是否显示
      isEdit: false, //是否显示编辑表单
      add: {
        //新增的表单数据----------------------------------------------------OK
        id: "", //id
        type: "", //咨询类型
        createtime: "", //咨询时间
        content: "", //咨询内容
        teacherId: "", //咨询师id
        userId: "", //用户id
        status: "", //预约状态
      },
      edit: {},
      formLabelWidth: "120px",
      TeacherIdAndName: [], //下拉列表咨询师的id和name
      UserIdAndName: [], //下拉列表User的id和name
      blurredName: "", //模糊查询名称
    };
  },
  //方法集合
  methods: {
    //模糊查询
    selectBlurred() {
      console.log("模糊查询", this.blurredName);
      this.axios({
        url: "http://localhost:8080/consultWait/selectWXWConsultwaitNameByTeacher",
        method: "get",
        params: {
          name: this.blurredName,
          page: this.page,
          size: this.size,
        },
      }).then((res) => {
        console.log("模糊查询",res);
        
        this.reservations = res.data.data.list;
        this.totalCount = res.data.data.total;
      });
    },

    //修改日期格式
    formatDate(date) {
      const d = new Date(date);
      const pad = (num) => num.toString().padStart(2, "0");

      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
        d.getDate()
      )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
    },

    //修改点击提交--------------------------------------------------OK
    updateReservation() {
      this.isEdit = false;
      console.log("edit", this.edit);
      // this.edit.createtime = new Date().toLocaleString();
      this.edit.createtime = this.formatDate(new Date());
      console.log(this.edit.createtime);

      this.axios
        .put(
          "http://localhost:8080/consultWait/updateWXWConsultwait",
          this.edit
        )
        .then((res) => {
          console.log(res);
          console.log("修改提交的内容", this.edit);

          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.selectAllReservation();
            this
          } else {
            this.$message.error("修改失败!");
          }
        });
    },

    //点击修改，数据回显----------------------------------------------OK
    handleEdit(row) {
      (this.isEdit = true), console.log(row);
      this.axios
        .get(
          "http://localhost:8080/consultWait/selectWXWConsultwaitNameById?id=" +
            row.id
        )
        .then((res) => {
          console.log("点击修改数据回显的内容", res);
          this.edit = res.data.data;
          if (this.edit.status == 0) {
            this.edit.status = "未确认";
          } else if (this.edit.status == 1) {
            this.edit.status = "未评价";
          } else if (this.edit.status == 2) {
            this.edit.status = "已评价";
          }
        });
    },

    //新增-----------------------------------------------------------------OK
    insertReservation() {
      (this.dialogFormVisible = false), console.log(this.add);
      this.axios({
        url: "http://localhost:8080/consultWait/insertWXWConsultwait",
        method: "post",
        data: JSON.stringify(this.add),
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      })
        .then((res) => {
          console.log(res);
          this.clearAdd();
          this.selectAllReservation();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //点击取消新增的数据清除
    clearAdd() {
      this.dialogFormVisible = false;
      this.add = {
        //新增的表单数据
        id: "", //id
        type: "", //咨询类型
        createtime: "", //咨询时间
        content: "", //咨询内容
        teacherId: "", //咨询师id
        userId: "", //用户id
        status: "", //预约状态
      };
      this.edit = {};
    },

    //查询所有数据-----------------------OK
    selectAllReservation() {
      this.axios({
        url: "http://localhost:8080/consultWait/selectAllWXWConsultwaitName",
        method: "get",
        params: {
          page: this.page,
          size: this.size,
        },
      })
        .then((res) => {
          console.log("查询所有的数据=====", res);
          this.reservations = res.data.data.list;
          this.totalCount = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 分页
    handleSizeChange(size) {
      this.size = size;
      if (this.name == null) {
        this.page = 1; // 重置为第一页
        this.selectAllReservation();
      } else {
        this.selectBlurred();
      }
    },

    // 页码改变
    handleCurrentChange(page) {
      this.page = page;
      if (this.name == null) {
        this.selectAllReservation();
      } else {
        this.selectBlurred();
      }
    },

    //确认删除的弹框
    handleDelete(row) {
      this.$confirm("确认删除这条知识记录吗？", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleClick(row);
        })
        .catch(() => {
          this.$message({ type: "info", message: "已取消删除" });
        });
    },

    // 删除
    handleClick(row) {
      this.axios({
        url:
          `http://localhost:8080/consultWait/deleteWXWConsultwait?id=` + row.id,
        method: "delete",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + localStorage.getItem("token"), // 如果需要认证
          "Custom-Header": "Some-Value", // 任何其他自定义头部
        },
      }).then((res) => {
        console.log(res);
        this.selectAllReservation();
      });
    },

    //查询Teacher表数据----------------------------------OK
    selectTeacherIdAndname() {
      this.axios({
        url: "http://localhost:8080/consultWait/selectAllTeacherNameId",
        method: "get",
      })
        .then((res) => {
          this.TeacherIdAndName = res.data.data;
          console.log("teacher表", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询User表数据----------------------------------OK
    selectUserIdAndname() {
      this.axios({
        url: "http://localhost:8080/consultWait/selectAllUserNameId",
        method: "get",
      })
        .then((res) => {
          console.log("User表", res);
          this.UserIdAndName = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  mounted() {
    this.selectAllReservation();
    this.selectTeacherIdAndname();
    this.selectUserIdAndname();
  },
};
</script>
<style scoped>
.img-container {
  width: 70px;
  height: 70px;
  position: relative;
  border-radius: 20%;
}

.img-container > img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20%;
}

.play-icon {
  font-size: 30px;
  line-height: 70px;
  margin: 0 auto;
}

.avatar-uploader {
  margin-bottom: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.img-container {
  width: 100px; /* 固定宽度 */
  height: 100px; /* 固定高度 */
  position: relative;
  border-radius: 20%;
  overflow: hidden; /* 确保超出部分被隐藏 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
}

.img-container > img {
  width: 100%; /* 使图片宽度适应容器 */
  height: 100%; /* 使图片高度适应容器 */
  object-fit: cover; /* 保持图片比例并填充容器 */
}
</style>